<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  姓：<input type="text" v-model="firstName"></br>
  名：<input type="text" v-model="lastName"></br>
  姓名：<span>{{fullName}}</span>
</div>

<script type="text/javascript">

  /*
  * 计算属性：
  *   要用的属性不存在，要通过已有的属性计算获得
  *   底层通过数据代理实现
  *     初次读取时会执行一次
  *     当依赖的数据发生变法时会执行一次
  *   相比methods，有了缓存机制，效率更高，调用更方便
  *
  * computed与watch的比较
  *   1.computed能完成的,watch都能完成
  *   2.watch能做的,computed比u一定能完成,例如监视里面的异步操作
  *   3.computes是通过return返回属性值,watch是直接修改data
  * 两个原则L:
  *   1.被所有vue管理的函数,写成普通函数(不要写成箭头函数),这样this指向的是vm或者组件实例对象
  *   2.所有不被vue管理的函数(定时器的回调函数,ajsx的回调函数等),最好写成箭头函数,这样this的指向才是vm后者组件实例对象
  *
  *
  *
  * */
  const vm = new Vue({
    el:'#root',
    data:{
      firstName:'张',
      lastName:'三',
      fullName:''
    },
    computed:{
      /*fullName:{
        get(){
          console.log('计算属性get方法被执行')
          return this.firstName + '-' + this.lastName
        },
        set(v){
          console.log('计算属性set方法被执行')
          var arr = v.split('-');
          this.firstName = arr[0]
          this.lastName = arr[1]

        }
      }*/
      //简写,只考虑读取，不考虑修改的时候，用计算属性的简写形式
      /*fullName() {
        return this.firstName + '-' + this.lastName;
      }*/
    },
    watch:{
      firstName(newVlue,oldValue){
        this.fullName = newVlue + '-' + this.lastName;
      },
      lastName(newVlue,oldValue){
        this.fullName = this.firstName + '-' + newVlue;
      }
    }
  });
</script>
</body>
</html>
